<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Collapse :value="[0,1]">
          <Panel>
            表单域配置
            <div slot="content">
              <Form :label-width="120">
                <FormItem :required="true" label="绑定表单数据字段">
                  <Input type="text" size="small" v-model="fieldConfig.bindingFieldName"/>
                </FormItem>
                <FormItem label="标签文本">
                  <Input type="text" size="small" v-model="formItemConfig.label"/>
                </FormItem>
                <FormItem label="标签宽度">
                  <InputNumber size="small" :max="1000" :min="0" v-model="formItemConfig.labelWidth" :active-change="false"></InputNumber>
                </FormItem>
                <FormItem label="隐藏标签">
                  <i-switch size="small" v-model="formItemConfig.hiddenLabel"></i-switch>
                </FormItem>
                <FormItem label="隐藏此表单域">
                  <i-switch size="small" v-model="formItemConfig.hidden"></i-switch>
                </FormItem>
              </Form>
            </div>
          </Panel>
          <Panel>
            下拉选择器配置
            <div slot="content">
              <Form :label-width="100">
                <FormItem label="尺寸">
                  <RadioGroup size="small" v-model="widgetConfig.size" type="button">
                    <Radio label="default">默认</Radio>
                    <Radio label="large">大号</Radio>
                    <Radio label="small">小号</Radio>
                  </RadioGroup>
                </FormItem>
                <FormItem label="占位文本">
                  <Input type="text" size="small" v-model="widgetConfig.placeholder"/>
                </FormItem>
                <FormItem label="是否可多选">
                  <i-switch size="small" v-model="widgetConfig.multiple"></i-switch>
                </FormItem>
                <FormItem label="清空按钮">
                  <i-switch size="small" v-model="widgetConfig.clearable"></i-switch>
                </FormItem>
                <FormItem label="禁用">
                  <i-switch size="small" v-model="widgetConfig.disabled"></i-switch>
                </FormItem>
                <FormItem label="是否支持搜索">
                  <i-switch size="small" v-model="widgetConfig.filterable"></i-switch>
                </FormItem>
                <FormItemPanel title="下拉备选数据">
                  <CodeEditor v-model="resultObjData" mode="json" :height="300" @on-submit-change="updateResultObj"></CodeEditor>
                </FormItemPanel>
              </Form>
            </div>
          </Panel>
        </Collapse>
      </TabPane>
      <TabPane name="field_config_tab" tab="main_tabs" label="数据校验">
        <FormItemRuleCreator v-model="formItemConfig.rules"></FormItemRuleCreator>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <FormItemInteractionEditTable :widgetEventCodeConfig="widgetEventCodeConfig"></FormItemInteractionEditTable>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>
import FormWidgetFormMixin from "@/mixin/FormWidgetFormMixin";

import {createHelpers} from 'vuex-map-fields';
const {mapFields} = createHelpers({
  getterType: 'designer/getLayoutItemFromTree',
  mutationType: 'designer/updateLayoutItemFromTree',
});

export default {
  name: "FormItemSelectWidgetForm",
  mixins: [FormWidgetFormMixin],
  props: {},
  data() {
    return {
      resultObjData: ''
    }
  },
  mounted() {
    this.resultObjData = JSON.stringify(this.ds_resultObj, null, 2)
  },
  methods: {
    updateResultObj() {
      this.$store.commit('designer/updateLayoutItemFromTree', {
        path: 'component.compConfigData.ds_resultObj',
        value: JSON.parse(this.resultObjData)
      });
    }
  },
  computed: {
    ...mapFields({

      fieldConfig: 'component.compConfigData.fieldConfig',
      formItemConfig: 'component.compConfigData.formItemConfig',
      widgetConfig: 'component.compConfigData.widgetConfig',
      widgetEventCodeConfig: 'component.compConfigData.widgetEventCodeConfig',
      ds_resultObj: 'component.compConfigData.ds_resultObj'

    })
  },
  watch: {}
}
</script>

<style scoped>

</style>
